---
layout: default
title: Custom GeoJSON styling
nav_order: 7
---
<div class="row">
  <div class="col-md-12">
    <h1>Custom GeoJSON styling</h1>
    <p><a href="assets/custom-geojson.js">View code</a></p>
  </div>
</div>
<div class="row">
  <div class="col-md-6">
    <div class="split-panels">
      <div class="split-panel">
        <div id="olmap"></div>
      </div>
      <div class="split-panel">
        <textarea id="custom-geojson" placeholder="Paste GeoJSON Feature or FeatureCollection here"></textarea>
      </div>
    </div>
  </div>
  <div class="col-md-3" style="margin:1rem 0 1rem 0;">
    <span>I don't want to upload anything, just give me some random</span>
    <button id="random-points" type="button">Points</button>
    <button id="random-lines" type="button">Lines</button>
    <button id="random-polygons" type="button">Rectangles</button>
  </div>
  <div class="col-md-6">
    <textarea id="sld"></textarea>
  </div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/mode/xml/xml.min.js"></script>
<script src="assets/random-features.js"></script>
<script src="assets/custom-geojson.js"></script>
